<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title th:text="${webinfo.webname}"></title>
    <link rel="icon" th:href="'/images/'+${webinfo.webicon}"/>
    <!--bootstrap3 cdn-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--font-awesome-->
    <link rel="stylesheet" href="/style/css/font-awesome.min.css"/>
    <!--layui-->
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="/style/css/pushbar.css"/>
    <script src="/script/js/pushbar.js"></script>
    <!--自定义样式css-->
    <link rel="stylesheet" href="/style/theme/default/main.css"/>
    <link rel="stylesheet" href="/style/theme/default/style.css"/>
    <!--js-->
    <script src="/script/js/me.js"></script>
    <style type="text/css">
        .message-content {
            max-width: 800px;
            padding: 0 10px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 74px;
            background-color: #fff;
        }

        .message-content .widget h3 {
            font-size: 18px;
            font-weight: bold;
            margin-top: 15px;
            margin-bottom: 15px;
            padding-top: 35px;
            padding-bottom: 20px;
        }

        @media (max-width: 630px) {
            .links ul li {
                width: 100% !important;
            }
        }


    </style>
    <script language="javascript">


    </script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-expand-md">
        <div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"><span
                        class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span></button>
                <a class="navbar-brand" href="javascript:void(0);"> <span> <img th:src="'/images/'+${webinfo.brandimg}"
                                                                                class="img-circle"
                                                                                style="height: 30px;width: 30px"/> </span>
                    <span th:text="${webinfo.webname}"></span> </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="homepage();">首页</a>
                    </li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="category();">分类</a>
                    </li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="archive();">归档</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="whisper();">微语</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="album();">相册</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="me();">关于</a></li>
                    <li class="navli"><a class="navbar-link current" href="javascript:void(0);" onclick="link();">友链</a>
                    </li>
                    <li>
                        <form class="navbar-form" action="artical" method="post">
                            <input type="text" name="keyword" class="form-control" placeholder="请输入关键字（回车搜索）"/>
                        </form>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="music" title="来点音乐"><i class="fa fa-music"></i></a>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="manage" title="后台"><i
                            class="layui-icon layui-icon-website"></i></a></li>
                    <li class="layui-hide-xs"><a href="javascript:void(0);" target="_blank" title="换肤"><i
                            class="layui-icon layui-icon-theme" id="skin"></i></a></li>
                    <th:block th:if="${session.userinfo} != null">
                        <li class=""><a href="javascript:void(0);"><cite th:text="${session.userinfo.nickname}"></cite></a>
                        </li>
                    </th:block>
                    <li class=""><a href="javascript:void(0);" data-pushbar-target="right"><i
                            class="layui-icon layui-icon-more-vertical"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <aside data-pushbar-id="right" class="pushbar from_right">
        <div class="title">
            <span data-pushbar-close="" class="close push_right"></span> Right
        </div>
    </aside>


    <style type="text/css">

        .message-list {
            position: relative;
            margin-bottom: 10px;
        }

        .message-list li:first-child {
            border-top: 0;
        }

        .comment-parent > img {
            width: 32px;
            height: 32px;
            margin: 5px;
            position: absolute;
            border-radius: 50%;
        }

        .message-list .info {
            overflow-x: hidden;
        }

        .message-list .info .username {
            color: #01AAED;
            margin: 0 5px 0 5px;
        }


        .message-list .comment-content {
            padding: 5px 0 5px 5px;
            min-height: 30px;
            word-break: break-all;
        }

        .message-list .comment-content, .message-list .info {
            margin: 0 53px;
        }

        .message-list .comment-parent .comment-time {
        }


        .message-list .info .btn-reply {
            color: #009688;
            margin: 0 5px 0 5px;
        }

        .message-list .info, .message-list .replycontainer {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .message-list .replycontainer .layui-form-item {
            margin-bottom: 5px;
        }

        .comment-child {
            margin-left: 53px;
            min-height: 50px;
        }

        .comment-child > img {
            width: 24px;
            height: 24px;
            margin: 5px 5px 5px 5px;
            position: absolute;
            border-radius: 50px;
        }

        .comment-child .info {
            margin-left: 48px;
            line-height: 20px;
        }

    </style>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var userinfo = [[${session.userinfo}]];//用户session信息
        var pageCount = [[${pageInfo.total}]];//数量
        var pageNum = [[${pageInfo.pageNum}]];//当前页
        var pageSize = [[${pageInfo.pageSize}]];//每页显示数量
        /*]]>*/

        function submessage() {
            if (userinfo != null) {
                var replyinfo = $('#replyinfo').val();
                if (replyinfo == '' || replyinfo == null) {
                    layer.msg("请输入留言内容！");
                    return;
                } else {
                    //留言
                    $.ajax({
                        type: "post",
                        url: "leavemsg",
                        dataType: "json",
                        data: {
                            "content": replyinfo
                        },
                        success: function (result) {
                            if (result.flag == "success") {
                                $('#replyinfo').val('');
                                layer.msg("留言成功！");
                                window.location.reload();
                            } else if (result.flag == "permissions") {
                                layer.msg("登录超时！", {icon: 2});
                            } else {
                                layer.msg("留言失败！", {icon: 2});
                            }
                        }, error: function () {
                            layer.msg("留言失败！", {icon: 2});
                        }
                    });
                }
            } else {
                layer.msg("请登陆！");
                return;
            }
        }

        function checkMsg() {
            var messageId = $('#messageId').val();
            var replyContent = $('#replyContent').val();
            if (messageId == '' || messageId == null) {
                layer.msg("系统异常！");
                return;
            }
            if (replyContent == '' || replyContent == null) {
                layer.msg("请输入回复内容！");
                return;
            } else {
                $.ajax({
                    type: "post",
                    url: "messagereply",
                    dataType: "json",
                    data: {
                        "messageId": messageId,
                        "replyContent": replyContent
                    },
                    success: function (result) {
                        if (result.flag == "success") {
                            $(".replycontainer").remove();
                            layer.msg("回复成功！");
                            window.location.reload();
                        } else if (result.flag == "permissions") {
                            layer.msg("登录超时！", {icon: 2});
                        } else {
                            layer.msg("回复失败！", {icon: 2});
                        }
                    }, error: function () {
                        layer.msg("回复失败！", {icon: 2});
                    }
                });
            }
        }

        layui.config({
            base: '/script/js/util/'
        }).use(['laypage', 'form', 'layer'], function () {
            var form = layui.form,
                laypage = layui.laypage,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery;
            laypage.render({
                elem: 'pageinfo'
                , count: pageCount             //数据总数
                , limit: pageSize                      //每页显示条数
                , curr: pageNum                        //起始页
                , groups: 5                      //连续页码个数

                //跳转页码时调用
                , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                    //do something
                    if (!first) {
                        //非首次加载 do something
                        var page = obj.curr;
                        url = "message?pageIndex=" + page;
                        window.location.href = url;
                    }
                }
            });

            $(".btn-reply").click(function (e) {
                if (userinfo != null) {
                    var idNo = $(e.target).attr("id");
                    $(".replycontainer").remove();
                    $(this).parent().append(
                        "<div class='replycontainer'>" +
                        "   <div class='layui-form-item'>" +
                        "       <input type='text' id='messageId' readonly hidden>" +
                        "       <textarea name='replyContent' id='replyContent' placeholder='请输入回复内容' class='layui-textarea' style='min-height:80px;' lay-verify='required'></textarea>" +
                        "   </div>" +
                        "   <div class='layui-form-item'>" +
                        "       <input type='button' class='layui-btn layui-btn-sm formReply' onclick='checkMsg()' id='formReply' value='提交'></input>" +
                        "   </div>" +
                        "</div>");
                    if (idNo != undefined) {
                        $('#messageId').val(idNo);
                    }
                } else {
                    layer.msg("请登陆！");
                    return;
                }
            });
        });
    </script>

    <div class="content message-content">
        <div class="">
            <div class="widget" align="center">
                <h3><i class="fa fa-comments-o"></i> 留言板</h3>
            </div>
            <div class='reply'>
                <div class='layui-form-item'>

                    <textarea name='replyinfo' id='replyinfo' placeholder='请输入留言内容' class='layui-textarea'
                              style='min-height:100px;' lay-verify='required'></textarea>
                </div>
                <div class='layui-form-item'>
                    <input type='button' class='layui-btn layui-btn-sm' onclick='submessage()' id='' value='发布'></input>
                </div>
            </div>

            <ul class="message-list" id="message-list">
                <li class="" th:each="message : ${messages}">

                    <div class="comment-parent">
                        <hr/>
                        <a name="remark-1"></a>
                        <img th:src="'/images/'+${message['prophoto']}">
                        <div class="info">
                            <span class="username" th:text="${message['name']}"></span>
                        </div>
                        <div class="comment-content">
                            <p th:text="${message['content']}"></p>
                        </div>
                        <p class="info info-footer">
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <span class="comment-time" th:text="${message['time']}"></span>
                            <a href="javascript:void(0);" class="btn-reply" th:id="'IDNO_'+${message['id']}">回复</a>
                        </p>
                    </div>

                    <div class="comment-child" th:each="messagereply : ${message['reply']}">

                        <img th:src="'/images/'+${messagereply['prophoto']}">
                        <div class="info">
                            <span class="username" th:text="${messagereply['fromusername']}"></span>
                            <span style="padding-right:0;margin-left:-5px;">回复</span>
                            <span class="username" th:text="${messagereply['tousername']}"></span>
                            <span th:text="${messagereply['content']}"></span>
                        </div>
                        <p class="info">
                            <span class="comment-time" th:text="${messagereply['replytime']}"></span>
                            <a href="javascript:void(0);" class="btn-reply"
                               th:id="'RIDNO_'+${messagereply['id']}">回复</a>
                        </p>
                    </div>
                    <hr/>
                </li>
            </ul>
            <div id="pageinfo" style="text-align:center"></div>
        </div>
    </div>
</div>
<footer>
    <div class="container" align="center">
        <div class="endnav">
            <p><b>站点声明：</b></p>
            <p>1、本站个人博客模板，均为本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
            <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱： <a href="/" target="_blank">lihairuizone@sina.com</a></p>
            <p>Copyright &copy; <a href="/" target="_blank">www.lihairuizone.com</a> All Rights Reserved. 备案号：<a
                    href="/" target="_blank">陕ICP备11002373号-1</a></p>
        </div>
    </div>
    <div id="toolBackTop" style="right: 56.375px;">
        <a class="top" href="javascript:void (0);" title="返回顶部" onclick="gotop();return false;"></a>
    </div>
</footer>
</body>
</html>